<template>
  <view class="container">
    <block>
      <view style="width:100%;height: 100%;">
        <view class="bg_div1" style="background: #d9e0f2;">
          <view style="overflow: hidden;">
            <view class="logo2">
              <image class="img-a" src="../../static/images/2.png"></image>
              <image class="img-b" src="../../static/images/3.png"></image>
            </view>
            <view style="padding:0 60rpx;position: relative;top: -250rpx">
              <view class="t-b">欢迎回来！
              </view>
              <view class="t-b2">欢迎使用，{{ appName }}小程序</view>
            </view>
            <view class="content_div1">
              <view>
                <view class="card_div1" style="background:#fff">
                  <view>
                    <view class="content-pri">
                      <button class="check-box-no-button" open-type="agreePrivacyAuthorization" @click="test"
                              id="agree-check-btn">
                        <checkbox class="privacy-agree-box" value="true" readonly :checked.sync="privacyAgree"/>
                      </button>
                      <text>在你使用【{{ appName }}小程序】服务之前，请仔细阅读并同意</text>
                      <text style="color: #1793ee;" @click.top="goToPrivacy">《{{ appName }}小程序隐私保护指引》</text>
                    </view>
                  </view>
                  <!-- 设置头像昵称e -->
                  <button
                      :open-type="privacyAgree?'agreePrivacyAuthorization|getPhoneNumber':'getPhoneNumber'"
                      @getphonenumber="getPhoneNumber" ref="login" class="btn1" :disabled="isLoading||!privacyAgree"
                      style="background:#00dd83;color: #fff">
                    <uni-load-more iconType="circle" status="loading" v-if="isLoading" color="#fff"/>
                    <text v-else>手机号一键登录</text>
                  </button>
                </view>
              </view>
            </view>
          </view>
          <!-- e -->
        </view>
      </view>
    </block>
    <show-privacy-agreement ref="showPrivacyAgree"
                            :privacyAgree.sync="privacyAgree"></show-privacy-agreement>
  </view>
</template>

<script>
var app = getApp();
import {loginfoin, openIdLoginfoin,} from '../../utils/new_file.js'

import showPrivacyAgreement from "@/pages/login/showPrivacyAgreement.vue";
// import {
// 	mapState,
// 	mapMutations
// } from 'vuex'
export default {
  components: {
    showPrivacyAgreement
  },
  computed: {
    appName() {
      return getApp().globalData.name
    },
    imgurl() {
      return getApp().globalData.imgUrl
    },
  },
  onShareTimeline(res) {
    let name= getApp().globalData.name
    let share = {
      title: name,
      path: `/pages/home/home`,
    }
    let logo = getApp().globalData.logoUrl
    if (logo) {
      share.imageUrl = this.imgurl + logo
    }
    return share
  },
  onShareAppMessage(res) {
    let name= getApp().globalData.name
    let share = {
      title: name,
      path: `/pages/home/home`,
    }
    let logo = getApp().globalData.logoUrl

    if (logo) {
      share.imageUrl = this.imgurl + logo
    }
    return share
  },
  data() {
    return {
      title: '欢迎回来！',
      resolvePrivacyAuthorization: null,
      phoneCode: '',
      isLoading: true,
      privacyVisible: true,
      privacyRang: [{'value': true, 'text': ''}],
      privacyAgree: false,
      tel: '',//手机号
      hqing: 0,
      geturl: '123',
      smsdjs: '',//验证码倒计时
      smscodes: '',//密码
      verCode: ''//验证码
    };
  },
  onLoad(ope) {
    // 判断微信小程序是否隐私授权
    wx.getPrivacySetting({
      success: res => {
        this.privacyAgree = !res.needAuthorization
        console.log('privacyAgree', res, this.privacyAgree)

        if (this.privacyAgree) {
          uni.login({
            success: (res) => {
              var code = res.code;
              openIdLoginfoin(code).then(data => {
                if (data.data.code == 200) {
                  uni.setStorageSync('useinfo', data.data.data)
                  uni.setStorageSync('token', data.data.data.token)
                  app.success('登录成功', () => {
                    if (this.geturl ==
                        "pages/my/my") {
                      uni.switchTab({
                        url: '/pages/my/my'
                      })
                      console.log('geturl', this.geturl)
                    } else {
                      uni.redirectTo({
                        url: this.geturl
                      })
                    }
                    // 返回登录之前的页面
                    console.log('geturl', this.geturl);
                  })
                }
                this.$nextTick(() => {
                  this.isLoading = false
                })
              })
            }
          })
        } else {
          this.isLoading = false
        }
      },
      fail: () => {
      }
    })
    this.geturl = ope.geturl
    if (ope.options) {
      const options = JSON.parse(ope.options)
      let paramStr = []
      for (let key in options) {
        paramStr.push(`${key}=${options[key]}`)
      }
      this.geturl += '?' + paramStr.join("&")
    }

    wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
      console.log('触发本次事件的接口是：' + eventInfo.referrer)
      this.resolvePrivacyAuthorization = resolve
      // 需要用户同意隐私授权时
      // 弹出开发者自定义的隐私授权弹窗
      if (this.privacyAgree) {
        setTimeout(() => {
          resolve({buttonId: 'agree-check-btn', event: 'agree'})
          console.log('同意事件')
        }, 1000)
      } else {
        this.privacyVisible = true
        this.$refs.showPrivacyAgree.init(resolve)
      }
    })
  },
  methods: {
    test(e) {
      this.privacyAgree = !this.privacyAgree
      wx.requirePrivacyAuthorize({
        complete: () => {
          if (!this.privacyAgree && this.resolvePrivacyAuthorization) {
            this.$refs.showPrivacyAgree.init(this.resolvePrivacyAuthorization)
          }
        },
        success: (res) => {
          console.log('成功', res)
        },
        fail: (err) => {
          console.log('失败', err)
        }
      })

      //this.$refs.showPrivacyAgree.init(null)
      console.log(this.privacyAgree)
    },
    // ...mapMutations(['loguserId']), //引入store方法
    getPhoneNumber(res) {
      const jump = this.geturl

      console.log('res', res)
      if (!res.detail.code) {
        uni.showToast({title: '当前小程序未设置获取手机的隐私条款或手机登录功能被封禁', icon: 'none', duration: 5000})
        return;
      }
      if (!this.privacyAgree) {
        uni.showToast({
              title: '请先同意隐私授权',
              icon: 'none'
            }
        )
        return
      }
      app.showLoading('正在登陆')
      uni.login({
        success(res2) {
          let obj = {
            code: res2.code,
            appId: app.globalData.appId,
            appSecret: app.globalData.appSecret,
            phoneCode: res.detail.code
          }
          console.log('res2', res2, '  res', res)
          loginfoin(obj).then(data => {
            if (data.data.code == 200) {
              uni.setStorageSync('useinfo', data.data.data)
              uni.setStorageSync('token', data.data.data.token)
              uni.setStorageSync('openId', data.data.data.openid)
              app.success('登录成功', () => {
                console.log('jump', jump)
                if (jump.indexOf("pages/home/home") > 0 || jump.indexOf("pages/my/my") > 0) {
                  uni.switchTab({
                    url: '/pages/my/my'
                  })
                } else {
                  uni.redirectTo({
                    url: jump
                  })
                }
              })
            }
            uni.hideLoading()
          }).catch(res => {
            this.$nextTick(() => {
              uni.hideLoading()
            })
          })
        }
      })
    },
    handleAgreePrivacyAuthorization() {
      // 告知平台用户已经同意，参数传同意按钮的id
      //this.resolvePrivacyAuthorization({buttonId: 'agree-btn', event: 'agree'})
      wx.requirePrivacyAuthorize({
        success: res => {
        }
      });
    },
    goToPrivacy() {
      wx.openPrivacyContract({
        success: () => {
          console.log('打开成功');
        }, // 打开成功
        fail: () => {
          uni.showToast({
            title: '打开失败，稍后重试',
            icon: 'none'
          })
        } // 打开失败
      })
    },
  }
}
</script>

<style>
page {
  background: #ffffff;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.text-center {
  text-align: center;
}

.title {
  margin: 70rpx 50rpx 50rpx 40rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 48rpx;
  font-weight: bold;
  color: #000000;
}

.loginform {
  width: 100%;
  padding: 0 50rpx;
  border-radius: 5px;
  background: #FFF;
}

.loginform .form-item {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px #ededed solid;
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1px solid #F0F3F6;
  margin-top: 20rpx
}

.loginform .form-item .img {
  width: 44rpx;
  height: 44rpx;
  margin-right: 30rpx
}

.loginform .form-item .input {
  flex: 1;
  color: #000;
  background: none;
}

.loginform .form-item .code {
  font-size: 30rpx
}

.xieyi-item {
  display: flex;
  align-items: center;
  margin-top: 30rpx
}

.xieyi-item {
  font-size: 24rpx;
  color: #B2B5BE
}

.xieyi-item .checkbox {
  transform: scale(0.6);
}

.authlogin {
  display: flex;
  flex-direction: column;
  align-items: center
}

.authlogin-logo {
  width: 180rpx;
  height: 180rpx;
  margin-top: 120rpx
}

.authlogin-name {
  color: #999999;
  font-size: 30rpx;
  margin-top: 60rpx;
}

.authlogin-btn {
  width: 580rpx;
  height: 96rpx;
  line-height: 96rpx;
  background: #51B1F5;
  border-radius: 48rpx;
  color: #fff;
  margin-top: 100rpx
}

.authlogin-btn2 {
  width: 580rpx;
  height: 96rpx;
  line-height: 96rpx;
  background: #EEEEEE;
  border-radius: 48rpx;
  color: #A9A9A9;
  margin-top: 20rpx
}

.ioslogin-btn {
  width: 580rpx;
  height: 96rpx;
  line-height: 96rpx;
  background: #fff;
  border-radius: 48rpx;
  color: #fff;
  border: 1px solid #555;
  color: #333;
  font-weight: bold;
  margin-top: 30rpx;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center
}

.ioslogin-btn image {
  width: 26rpx;
  height: 26rpx;
  margin-right: 16rpx;
}

.googlelogin-btn {
  width: 580rpx;
  height: 96rpx;
  line-height: 96rpx;
  background: #fff;
  border-radius: 48rpx;
  color: #fff;
  border: 1px solid #555;
  color: #333;
  font-weight: bold;
  margin-top: 30rpx;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center
}

.googlelogin-btn2 {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center
}

.xieyibox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.7)
}

.xieyibox-content {
  width: 90%;
  margin: 0 auto;
  /*  #ifdef  MP-TOUTIAO */
  height: 60%;
  /*  #endif  */
  /*  #ifndef  MP-TOUTIAO */
  height: 80%;
  /*  #endif  */
  margin-top: 20%;
  background: #fff;
  color: #333;
  padding: 5px 10px 50px 10px;
  position: relative;
  border-radius: 2px;
}

.bg_div1 {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.content_div1 {
  align-items: center;
  position: fixed;
  width: 100%;
  padding: 60rpx;
  margin: 0 auto;
  bottom: 50rpx;
}

.title1 {
  opacity: 1;
  font-size: 50rpx;
  font-weight: bold;
  line-height: 90rpx;
  text-align: left;
  margin-top: 80rpx;
}

.subhead1 {
  font-size: 28rpx;
  font-weight: 500;
  line-height: 40rpx;
}

.card_div1 {
  width: 100%;
  padding: 40rpx;
  border-radius: 24rpx;
  bottom: 50rpx;
}

.tel1 {
  width: 100%;
  height: 100rpx;
  border-radius: 100rpx;
  line-height: 100rpx;
  background-color: #F5F7FA;
  padding: 0 40rpx;
  margin: 20rpx 0;
  margin-top: 30rpx;
}

.code1 {
  height: 100rpx;
  font-size: 24rpx;
  line-height: 100rpx;
  float: right;
}

.btn1 {
  width: 100%;
  height: 100rpx;
  border-radius: 100rpx;
  line-height: 100rpx;
  margin: 20rpx 0;
  text-align: center;
  font-weight: bold;
  color: #A9A9A9;
  font-size: 30rpx
}

.other_line {
  width: 106rpx;
  height: 2rpx;
  background: #D8D8D8;
  margin-top: 20rpx;
}

.logo2 {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.inputcode {
  width: 300rpx;
  height: 100rpx;
  line-height: 100rpx;
  display: inline-block;
  background: none;
}

.input_val {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background: none;
}

.xycss1 {
  line-height: 60rpx;
  font-size: 24rpx;
  overflow: hidden;
}

.other_login {
  width: 420rpx;
  margin: 60rpx auto;
}

.overflow_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 380rpx;
}

.other_content {
  overflow: hidden;
  width: 100%;
  margin-top: 60rpx;
  text-align: center;
  display: flex;
  justify-content: center;
}

.content-pri {
  margin: 0 auto;
  font-size: 25rpx;
  line-height: 1.5;
}

.privacy-agree-box {
  transform: scale(0.7);
}

.img-a {
  position: absolute;
  width: 100%;
  top: -150rpx;
  right: 0;
}

.img-b {
  position: absolute;
  width: 50%;
  bottom: 0;
  left: -50rpx;
  /* margin-bottom: -200rpx; */
}

.t-b {
  text-align: left;
  font-size: 56rpx;
  color: #000;
  padding: 250rpx 0 30rpx 0;
  font-weight: bold;
  z-index: 5;
}

.t-b2 {
  text-align: left;
  font-size: 36rpx;
  color: #555;
  padding: 0rpx 0 120rpx 0;
  z-index: 5;
}

.check-box-no-button {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  border: 0;
  font-size: 12px;
  color: #000;

  cursor: pointer;
  display: inline;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.check-box-no-button:after {
  border: 0;
  height: auto;
  content: ''
}
</style>